<template>
  <PageWrapper title="销售合作伙伴">
    <div id="partner">
      <a-card>
        <div class="ant-basic-table">
          <a-row justify="space-between" class="my-4 mx-4 top">
            <a-col> 合伙人姓名： </a-col>
            <a-col>
              <a-space>
                <a @click="addInfo">添加用户</a><a @click="showUpdatepassword">修改密码</a>
              </a-space>
            </a-col>
          </a-row>
          <a-table
            class="ant-table-striped"
            :columns="columns"
            size="small"
            :data-source="dataSource"
            bordered
            :row-selection="rowSelection"
            :pagination="false"
            :scroll="{ x: 1400 }"
            rowKey="userId"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'operation'">
                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除"
                  @confirm="onDelete(record.key)"
                >
                  <a>删除</a>
                </a-popconfirm>
              </template>
            </template>
            <template #summary>
              <a-table-summary-row>
                <a-table-summary-cell>合计</a-table-summary-cell>
                <a-table-summary-cell :col-span="13">
                  <a-typography-text> 111 </a-typography-text>
                </a-table-summary-cell>
              </a-table-summary-row></template
            >
          </a-table>

          <a-row justify="space-between" class="mt-4">
            <a-col>
              <a-pagination v-model:current="pageNo" :total="totalPage" @change="changePage" />
            </a-col>

            <a-col>
              <a-space class="btn-group"> <a-button type="primary">发送</a-button> </a-space></a-col
            ></a-row
          >
        </div>
      </a-card>
      <!-- 添加用户 -->
      <a-modal
        v-model:visible="infoVisible"
        title="添加用户"
        ok-text="提交"
        cancel-text="取消"
        width="1000px"
        :bodyStyle="{ padding: '24px' }"
        @ok="onOk"
      >
        <a-form
          ref="infoRef"
          :model="infoState"
          :rules="accountRules"
          :label-col="{ style: { width: '90px' } }"
          name="basic"
          autocomplete="off"
        >
          <a-row>
            <a-col :span="6">
              <a-form-item name="username" label="用户名称">
                <a-input v-model:value="infoState.username" /> </a-form-item
            ></a-col>
            <a-col :span="6">
              <a-form-item name="username" label="联系人">
                <a-input v-model:value="infoState.contact" /> </a-form-item
            ></a-col>

            <a-col :span="6">
              <a-form-item name="username" label="手机">
                <a-input v-model:value="infoState.tel" /> </a-form-item
            ></a-col>
            <a-col :span="6">
              <a-form-item name="username" label="地址">
                <a-cascader v-model:value="value" :options="options" placeholder="请选择" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-table
            class="ant-table-striped"
            :columns="columns1"
            size="small"
            :data-source="dataSource1"
            bordered
            :row-selection="rowSelection"
            :pagination="false"
          >
          </a-table>
        </a-form>
      </a-modal>
      <!-- 修改密码 -->
      <a-modal
        v-model:visible="passwordVisible"
        title="修改密码"
        ok-text="提交"
        cancel-text="取消"
        :bodyStyle="{ padding: '24px' }"
        @ok="updatePassword"
      >
        <a-form
          ref="passwordRef"
          :model="passwordState"
          :rules="passwordRules"
          :label-col="{ style: { width: '80px' } }"
          name="basic"
          autocomplete="off"
        >
          <a-form-item name="username" label="账号">
            <a-input v-model:value="passwordState.username" />
          </a-form-item>
          <a-form-item name="username" label="旧密码">
            <a-input-password v-model:value="passwordState.username" />
          </a-form-item>
          <a-form-item name="username" label="新密码">
            <a-input-password v-model:value="passwordState.username" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page'
  import type { TableProps } from 'ant-design-vue'

  import { ref, reactive, toRaw ,onMounted} from 'vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import type { CascaderProps } from 'ant-design-vue'
  import { partnerIndex } from '/@/api/sys/partner'
  const token = localStorage.getItem('TOKEN_KEY')
    //当前页码
    const pageNo = ref(1)
  // 总页码
  const totalPage = ref(0)
  //总计
  const sum = ref('')
  const options: CascaderProps['options'] = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ]
  const value = ref<string[]>([])
  //选择框
  interface DataType {
    // key: string
    // name: string
    // age: number
    address: string
  }

  const rowSelection: TableProps['rowSelection'] = {
    columnTitle: '选择',
    type: 'radio',
    columnWidth: 80,
    fixed: true,
    onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
    },
    // getCheckboxProps: (record: DataType) => ({
    //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
    //   name: record.name,
    // }),
  }
  //资料录入
  interface Values {
    username: string
    contact: string
    tel: string
    date: string
    software: string
    address: string
  }
  const infoRef = ref()
  const infoVisible = ref<Boolean>(false)

  function addInfo() {
    infoVisible.value = true
    console.log(2)
  }
  const infoState = reactive<Values>({
    username: '',
    contact: '',
    tel: '',
    date: '',
    software: '',
    address: '',
  })
  const accountRules: Record<string, Rule[]> = {
    username: [{ required: true, message: '请输入您的账号' }],
    contact: [{ required: true, message: '请输入您的联系人' }],
  }
  const onOk = () => {
    infoRef.value
      .validateFields()
      .then((values: any) => {
        console.log('Received values of form: ', values)
        console.log('infoState: ', toRaw(infoState))
        infoVisible.value = false
        infoRef.value.resetFields()
        console.log('reset formState: ', toRaw(infoState))
      })
      .catch((info: any) => {
        console.log('Validate Failed:', info)
      })
  }
  //表格数据
  const columns = ref([
    {
      title: '添加日期',
      dataIndex: 'date',
      key: 'date',
      width: '80',
    },
    {
      title: '用户名称',
      dataIndex: 'contact',
      key: 'contact',
    },
    {
      title: '联系人',
      dataIndex: 'tel',
      key: 'tel',
    },

    {
      title: '手机',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },

    {
      title: '账号',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '密码',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '软件名称',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '推销有效期',
      children: [
        {
          title: '开始日期',
          dataIndex: 'home',
          key: 'home',
          width: 80,
        },
        {
          title: '结束日期',
          dataIndex: 'software',
          key: 'software',
          width: 80,
        },
        {
          title: '小心推销',
          dataIndex: 'software',
          key: 'software',
          width: 80,
        },
      ],
    },
    {
      title: '租售付款',
      children: [
        {
          title: '到账日期',
          dataIndex: 'home',
          key: 'home',
          width: 80,
        },
        {
          title: '到账金额',
          dataIndex: 'software',
          key: 'software',
          width: 80,
        },
      ],
    },
    {
      title: '起租日期',
      dataIndex: 'idea',
      key: 'idea',
    },
    {
      title: '到租日期',
      dataIndex: 'idea',
      key: 'idea',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '操作',
      fixed: 'right',
      width: 80,
      dataIndex: 'operation',
    },
  ])
  const dataSource = ref([])
  //添加用户
  const columns1 = ref([
    {
      title: '软件名称',
      dataIndex: 'date',
      key: 'date',
      width: '80',
    },
    {
      title: '适租对象',
      dataIndex: 'contact',
      key: 'contact',
    },
  ])
  const dataSource1 = ref([
    {
      key: 1,
      date: '',
      contact: '章三',
    },
  ])
  //修改密码
  interface passwordValues {
    username: string
  }
  const passwordRef = ref()
  const passwordVisible = ref<Boolean>(false)
  const passwordState = reactive<passwordValues>({
    username: '',
  })

  const passwordRules: Record<string, Rule[]> = {
    username: [{ required: true, message: '请输入您的账号' }],
  }
  const showUpdatepassword = () => {
    passwordVisible.value = true
  }
  const updatePassword = () => {
    passwordRef.value
      .validateFields()
      .then((values: any) => {
        // console.log('Received values of form: ', values)
        // console.log('accountState: ', toRaw(passwordState))
        passwordVisible.value = false
        passwordRef.value.resetFields()
        // console.log('reset formState: ', toRaw(passwordState))
      })
      .catch((info: any) => {
        console.log('Validate Failed:', info)
      })
  }
  //删除
  const onDelete = (key: string) => {
    dataSource.value = dataSource.value.filter((item: any) => item.key !== key)
  }
  async function getTable() {
    const params = {
      token: token,
      pageNo: pageNo.value,
    }
    const res = await partnerIndex(params)
    totalPage.value = res.data.totalPage
    dataSource.value = res.data.items
    sum.value = res.data.sum.payAmontSum
  }
  function changePage() {
    getTable()
  }
  // 页面加载时自动执行
  onMounted(() => {
    getTable()
  })
</script>
<style scoped lang="less">
  #partner {
    .top {
      a {
        color: #333;
      }
    }

    .btn-group {
      display: flex;
      justify-content: end;
      margin-top: 20px;
    }
  }
</style>
